{% extends 'layout/base.html' %}

{% block css %}
    <style>
        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .card > .card-header a {
            text-decoration: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

        .card > .card-heading .function .upload {
            overflow: hidden;
        }

        .card > .card-header .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }

        .upload-progress .progress-error {
            color: red;
        }

        .error-msg {
            color: red;
        }


    </style>
{% endblock %}


{% block content %}




    <div class="container-fluid">

        <div class="card">
            <div class="card-header" style="display: flex; justify-content: space-between;">
                <div>
                    <a href="{% url 'domain' %}">
                        {% if file_obj %}
                            <i class="fa fa-home" aria-hidden="true"></i>
                            <span>{{ file_obj.it_name }}</span>
                        {% endif %}
                    </a>
                </div>
                <div class="function">
                    <a class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal"
                       data-whatever="上传apk包">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 上传apk包
                    </a>
                </div>
            </div>

            <div class="card-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th>apk名称</th>
                        <th>版本</th>
                        <th>上传时间</th>
                        <th>环境</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="rowList">
                    {% if upload_obj %}
                        {% for item in upload_obj %}
                            <tr>
                                {% if forloop.first %}
                                    <td><a href="{% url 'apk_download' %}?pid={{ item.id }}"><i
                                            class="fa fa-arrow-circle-o-down" style="font-size:18px;color:red"></i>&nbsp;{{ item.apk_file }}
                                    </a></td>
                                    <td><span style="color:red">New</span>&nbsp;{{ item.versions }}</td>
                                    <td style="color:red">{{ item.update_datetime }}</td>
                                    <td>{{ item.get_context_display }}</td>

                                    <td>
                                        <a href=""
                                           data-bs-toggle="modal"
                                           data-bs-target="#show_details"
                                           data-bs-placement="top"
                                           data-whatever="备注"
                                           data-details="{{ item.comment }}">
                                         {{ item.comment|truncatechars:20 }}
                                        </a>
                                    </td>

                                    <td>
                                        <a class="btn btn-default btn-sm"
                                           href="{% url 'apk_download' %}?pid={{ item.id }}" title="下载">
                                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                        </a>
                                        <a class="btn btn-default btn-sm"
                                           data-bs-toggle="modal"
                                           data-bs-target="#addModal"
                                           data-apk_name="{{ item.apk_file }}"
                                           data-versions="{{ item.versions }}"
                                           data-context="{{ item.context }}"
                                           data-comment="{{ item.comment }}"
                                           data-apk_packet="{{ item.file_path }}"
                                           data-fid="{{ item.id }}"
                                           data-whatever="编辑"><i class="fa fa-pencil-square-o" aria-hidden="true"
                                                                 title="编辑"></i></a>
                                        <a class="btn btn-danger btn-sm"
                                           data-bs-toggle="modal"
                                           data-bs-target="#myModal"
                                           data-fid="{{ item.id }}"><i class="fa fa-trash" aria-hidden="true"
                                                                       title="删除"></i></a></td>
                                {% else %}
                                    <td><a href="{% url 'apk_download' %}?pid={{ item.id }}"><i
                                            class="fa fa-arrow-circle-o-down"
                                            style="font-size:18px;"></i>&nbsp;{{ item.apk_file }}</a></td>
                                    <td>{{ item.versions }}</td>
                                    <td>{{ item.update_datetime }}</td>
                                    <td>{{ item.get_context_display }}</td>
                                     <td>
                                        <a href=""
                                           data-bs-toggle="modal"
                                           data-bs-target="#show_details"
                                           data-bs-placement="top"
                                           data-whatever="备注"
                                           data-details="{{ item.comment }}">
                                         {{ item.comment|truncatechars:20 }}
                                        </a>
                                    </td>
                                    <td>
                                        <a class="btn btn-default btn-sm"
                                           href="{% url 'apk_download' %}?pid={{ item.id }}" title="下载">
                                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                        </a>
                                        <a class="btn btn-default btn-sm"
                                           data-bs-toggle="modal"
                                           data-bs-target="#addModal"
                                           data-apk_name="{{ item.apk_file }}"
                                           data-versions="{{ item.versions }}"
                                           data-context="{{ item.context }}"
                                           data-comment="{{ item.comment }}"
                                           data-fid="{{ item.id }}"
                                           data-whatever="编辑"><i class="fa fa-pencil-square-o" aria-hidden="true"
                                                                 title="编辑"></i></a>
                                        <a class="btn btn-danger btn-sm"
                                           data-bs-toggle="modal"
                                           data-bs-target="#myModal"
                                           data-fid="{{ item.id }}"><i class="fa fa-trash" aria-hidden="true"
                                                                       title="删除"></i></a></td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td><span>暂无数据</span></td>
                        </tr>
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!--添加和编辑modal对话框-->
    <div class="modal fade" id="addModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addForm">
                        {% csrf_token %}
                        <input type="hidden" name="pid" id="pid_id" value={{ pid }}>

                        <div class="form-group">
                            <label for="{{ form.apk_file.id_for_label }}">{{ form.apk_file.label }}</label>
                            {{ form.apk_file }}
                        </div>

                        <div class="form-group">
                            <label for="{{ form.versions.id_for_label }}">{{ form.versions.label }}</label>
                            {{ form.versions }}
                        </div>


                        <div class="form-group">
                            <label for="{{ form.context.id_for_label }}">{{ form.context.label }}</label>
                            {{ form.context }}
                        </div>


                        <div class="form-group" id="uploading_id">
                            <span style="color: red">*</span>
                            <label for="formFile" class="form-label">上传apk</label>
                            <input class="form-control" type="file" id="formFile">
                            <span class="error-msg"></span>
                        </div>


                        <div class="form-group">
                            <label for="{{ form.comment.id_for_label }}">{{ form.comment.label }}</label>
                            {{ form.comment }}
                        </div>

                        <br/>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="bindSubmit">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--删除modal对话框-->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    <h6>确定删除?</h6>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" id="btnDelete" class="btn btn-danger" data-bs-dismiss="modal">确定
                    </button>
                </div>
            </div>
        </div>
    </div>

     <!--显示完整字段对话框-->
    <!-- 模态框 -->
    <div class="modal fade" id="show_details" style="margin-top: 30px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h6 class="modal-title"></h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    <p class="all-details" style="word-wrap:break-word;"></p>
                    <br>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>
        var FILE_DELETE_URL = "{% url 'apk_delete' %}";
        $(function () {
            initAddModal();
            bindModelSubmit();
            bindDeleteSubmit();
        });

        function initAddModal() {
            $("#addModal").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var recipient = button.data('whatever');
                var fid = button.data('fid');
                var apk_name = button.data('apk_name');
                var versions = button.data('versions');
                var context = button.data('context');
                var comment = button.data('comment');
                var modal = $(this);
                modal.find('.modal-title').text(recipient);
                if (fid) {
                    modal.find('.error-msg').empty();
                    modal.find('#id_apk_file').val(apk_name);
                    modal.find('#id_versions').val(versions);
                    modal.find('#id_context').val(context);
                    modal.find('#id_comment').val(comment);
                    modal.find("#bindSubmit").attr('fid', fid);
                    modal.find("#uploading_id").hide(); /*隐藏上传文本款*/
                } else {
                    modal.find("#bindSubmit").attr('fid');
                    modal.find('.error-msg').empty();
                    $('#addForm')[0].reset();
                }
            });
            /*删除modal对话框*/
            $("#myModal").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var fid = button.data('fid');
                $('#btnDelete').attr('fid', fid);
            });
            /*字段过长时显示详情modal*/
            $("#show_details").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var details = button.data("details");
                var recipient = button.data('whatever');
                var modal = $(this);
                modal.find(".modal-title").text(recipient);
                modal.find(".all-details").text((details));

            });


        }

        /*上传apk*/
        function bindModelSubmit() {
            $("#bindSubmit").click(function () {
                var pid = $("#pid_id").val();
                var fid = $("#bindSubmit").attr('fid');
                var checkFileList = new FormData();
                var fileList = $("#formFile")[0].files;
                $.each(fileList, function (index, fileObject) {
                    checkFileList.append("f1", fileObject)
                });
                checkFileList.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
                checkFileList.append("data", $("#addForm").serialize());
                checkFileList.append("pid", pid); //项目id
                checkFileList.append("fid", fid);
                $.ajax({
                    url: location.href,
                    type: "POST",
                    data: checkFileList,
                    processData: false,
                    contentType: false,
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            window.location.href = location.href;
                        } else {
                            $(".error-msg").text(res.error)

                        }
                    }

                })
            })
        }

        /*删除APK对话框*/
        function bindDeleteSubmit() {
            $("#btnDelete").click(function () {
                $.ajax({
                    url: FILE_DELETE_URL,
                    type: "GET",
                    data: {fid: $(this).attr('fid')},
                    success: function (res) {
                        if (res.status) {
                            window.location.href = location.href;
                        } else {
                            alert("删除失败")
                        }

                    }
                })
            })

        }


    </script>


{% endblock %}